<template>
    <bi-input readonly v-model="valueLabel" icon="fa-shopping-bag">
        <template #after>
            <bi-icon data="fa-info-circle" @click="clear" style="margin-right: 10px; cursor: pointer;" v-if="valueLabel"></bi-icon>
            <bi-icon data="fa-ban" @click="clear" style="margin-right: 10px; cursor: pointer;" v-if="valueLabel"></bi-icon>
            <bi-button type="light" icon="fa-edit" @click="showDialog">选择商品</bi-button>
        </template>
    </bi-input>
</template>


<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
import goodsDialog from '../goods/select-goods-dialog.vue';

export default{
    mixins:[fieldMixin],
    data(){
        return {
            valueLabel:''
        }
    },
    computed:{
        value:{
            get(){
                return this.modelValue;
            },
            set(val){
                this.$emit('update:modelValue',val);
                this.valueLabel = val.title;
            }
        },
    },
    watch:{
        modelValue:{
            handler(val){
                if (val){

                    let hotData = this.$user.getHotData('goods');

                    let goodsData = hotData.find((item)=>{
                        return  item.goods_id = val;
                    });

                    if (goodsData){
                        this.setValueLabel(goodsData);
                    }else{
                        this.loading = true;
                        this.$ajax({
                            url:this.$url({'app':'shop',controller:'admin.goods',action:'detail'}),
                            data:{
                                goods_id:val
                            },
                            success:(res)=>{
                              this.$user.setHotData('goods','goods_id',res)
                              this.setValueLabel(res);
                              this.loading = false;
                            }
                        })
                    }

                }
            },
            immediate:true
        }
    },
    methods:{
        showDialog(){
            let dialog  = this.$dialog({
                type:'vue',
                content:admin.createApp(goodsDialog,{}),
                callback:(goods)=>{
                    this.$user.setHotData('goods','goods_id',goods);    
                    this.value = goods.goods_id;
                    this.setValueLabel(goods); 
                    dialog.close();
                }
            });
        },
        clear(){
            this.value = {};
            this.valueLabel = '';
        },
        setValueLabel(goods){
            let title = goods.title;
            if (goods.variant_param){
                title  += ' / ';
                for(let i in goods.variant_param.value){
                    if (goods.variant_param.value[i]){
                        title  += ' ' +  goods.variant_param.value[i].title;
                    }
                }
            }

            this.valueLabel =  title;
        }
    },
}
</script>